<script setup lang="ts">
import { ref } from "vue";
import { useRequest } from "@/utils/hooks";
import { formDetail } from "@/services/formService/form";
import SmartForm, { SmartFormAction } from "@/components/SmartForm";
import { useRoute } from "vue-router";
const formRef = ref<SmartFormAction>();
const route = useRoute();
const { query } = route;
const mode = ref("edit");

const { data: detail } = useRequest(() => formDetail(query?.formId as string));

const handleSubmit = async () => {
  const res = await formRef.value?.submit();
};
</script>

<template>
  <div>
    <SmartForm
      ref="formRef"
      :form-title="detail?.formName"
      :list="detail?.controlList"
      :mode="mode"
    />
    <div class="btn-box">
      <van-button round block type="primary" @click="handleSubmit"
        >提交</van-button
      >
      <van-button
        style="margin-top: 40px"
        round
        block
        type="primary"
        @click="mode = mode === 'edit' ? 'read' : 'edit'"
      >
        {{ mode === "edit" ? "预览" : "提交" }}
      </van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.btn-box {
  margin: 32px;
}
</style>
